/*** add the following contect in the html header section:
<http://123bible.googlecode.com/svn/trunk/src/html/tl_nt_header.html>
***/

        function constructFilteredEventSource(baseEventSource, database, propertyID, matchValue) {
            return new Timeline.FilteredEventSource(
                baseEventSource,
                function(evt) {
                    return database.getObject(evt.getID(), propertyID) == matchValue;
                }
            );
        }
        
        function myTimelineConstructor(div, eventSource) {
            var theme = Timeline.ClassicTheme.create();
            theme.ether.backgroundColors[2] = theme.ether.backgroundColors[0];
            theme.ether.backgroundColors[3] = theme.ether.backgroundColors[1];
            var d = Timeline.DateTime.parseGregorianDateTime("-0175")
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "20%", 
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 100,
                    eventSource:    constructFilteredEventSource(eventSource, window.database, "category", "a"),
                    date:           d,
                    theme:          theme
                }),
                Timeline.createBandInfo({
                    width:          "30%", 
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 100,
                    eventSource:    constructFilteredEventSource(eventSource, window.database, "category", "b"),
                    date:           d,
                    theme:          theme
                }),
                Timeline.createBandInfo({
                    width:          "30%", 
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 100,
                    eventSource:    constructFilteredEventSource(eventSource, window.database, "category", "c"),
                    date:           d,
                    theme:          theme
                }),
                Timeline.createBandInfo({
                    width:          "20%", 
                    overview:       true,
                    intervalUnit:   Timeline.DateTime.MILLENNIUM,
                    intervalPixels: 200,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme
                })
            ];

              
            bandInfos[1].syncWith = 0;
            bandInfos[2].syncWith = 0;
            bandInfos[3].syncWith = 1;
            bandInfos[3].highlight = true;
            
            div.style.height = "600px";
            div.style.fontSize = "16px";
            
            return Timeline.create(div, bandInfos, Timeline.HORIZONTAL);
        }

